<template>
  <v-map
      class="map"
      ref="map"
      :view="view"
      :controls="controls"
      :interactions="interactions"
      @click="onClick"
      @load="onLoad"
  >
    <v-tile :tile-type="tileType" :xyz="xyz"></v-tile>
    <!--矢量图层-->
    <v-vector
        ref="pointLayer"
        layer-id="pointLayer"
        :features="features"
        @featuresChange="featuresChange"
        @singleclick="onClickFeatures">
    </v-vector>
<!--    <v-graphic-->
<!--       ref="pointLayer"-->
<!--       layer-id="pointLayer"-->
<!--       :features="features">-->
<!--    </v-graphic>-->
  </v-map>

</template>

<script>
import pointIcon from '@/assets/map/pointSta.png'
import selectPointIcon from '@/assets/map/pointStaSelect.png'
export default {
  name: 'stationMap',
  data () {
    return {
      view: {
        center: [103.22836816745777, 25.23964540709535], // 中心点
        // projection: 'EPSG:4326',
        projection: 'EPSG:3857', //投影
        convert:'4326-3857',
        zoom: 8,
        minZoom: 6,
        maxZoom: 15,
        extent: [73.55, 18.16, 135.08, 53.55], // 设置视图范围为中国边界范围
        constrainResolution: true // 设置为true，确保地图不会显示超出中国范围的部分
      },
      controls: {},
      interactions: {
        DragRotateAndZoom: true,
        doubleClickZoom: false,
        dragPan: true,
        mouseWheelZoom: true
      },
      // 图层类型
      // tileType: 'XYZ',
      tileType: 'CUSTOM_XYZ',
      // tileType: 'bd',
      xyz: {
        // url: '/map_transport/{z}/{x}/{y}.png',
        url: 'http://172.20.5.141:8088/styles/osm-bright/{z}/{x}/{y}.png',
        // projection: 'baidu',
        // tileUrl: '/map_transport_api/maptile',
        // tileUrl17:'/map_transport_tile17/maptile',
        // tileUrl18:[`/map_transport_tile18_1/maptile`, `/map_transport_tile18_2/maptile`, `/map_transport_tile18_3/maptile`],
      },
      features: [],
      list: [
        {
          count: 115,
          loc: '中国云南省昆明市宜良县四段',
          lat: '25.23964540709535',
          lng: '103.22836816745777',
          aci: '25477',
          alac: '509'
        },
        {
          count: 114,
          loc: '中国云南省昆明市宜良县马山段',
          lat: '25.248644343850838',
          lng: '103.23036682981817',
          aci: '6431',
          alac: '34951'
        },
        {
          count: 113,
          loc: '中国云南省昆明市宜良县一段',
          lat: '25.236859452840196',
          lng: '103.20938617753826',
          aci: '34721',
          alac: '2142'
        },
        {
          count: 111,
          loc: '中国云南省昆明市宜良县十四段',
          lat: '25.097115821506446',
          lng: '102.68698403952726',
          aci: '25496',
          alac: '791'
        },
        {
          count: 110,
          loc: '中国云南省昆明市宜良县十七段',
          lat: '25.106862479355552',
          lng: '102.77028084643037',
          aci: '25488',
          alac: '516'
        },
        {
          count: 109,
          loc: '中国云南省昆明市宜良县二十段',
          lat: '25.107339999692208',
          lng: '102.77646718629431',
          aci: '25491',
          alac: '519'
        },
        {
          count: 108,
          loc: '中国云南省昆明市宜良县二段',
          lat: '25.052667381200198',
          lng: '102.71348785044621',
          aci: '25493',
          alac: '555'
        },
        {
          count: 108,
          loc: '中国云南省昆明市宜良县汽乐段',
          lat: '25.236566979156187',
          lng: '103.20239506592388',
          aci: '22703',
          alac: '34951'
        },
        {
          count: 106,
          loc: '中国云南省昆明市宜良县二段',
          lat: '25.23675006265642',
          lng: '103.220374508237',
          aci: '2142',
          alac: '175'
        },
        {
          count: 106,
          loc: '中国云南省昆明市宜良县十八段',
          lat: '25.105474485045633',
          lng: '102.77279220681443',
          aci: '25489',
          alac: '517'
        },
        {
          count: 102,
          loc: '中国云南省昆明市宜良县十五段',
          lat: '25.061852653676944',
          lng: '102.74203542608078',
          aci: '25497',
          alac: '800'
        },
        {
          count: 100,
          loc: '中国云南省昆明市宜良县汽乐段',
          lat: '24.991715368174667',
          lng: '103.15446877262063',
          aci: '2730',
          alac: '34951'
        },
        {
          count: 99,
          loc: '中国云南省昆明市宜良县十六段',
          lat: '25.10373036481595',
          lng: '102.77598730641377',
          aci: '25478',
          alac: '521'
        },
        {
          count: 98,
          loc: '中国云南省昆明市宜良县汽乐段',
          lat: '25.21125774660031',
          lng: '103.21138412915077',
          aci: '16007',
          alac: '34951'
        },
        {
          count: 97,
          loc: '中国云南省昆明市宜良县凤阿段',
          lat: '24.989545179302596',
          lng: '103.04435586844664',
          aci: '4733',
          alac: '34951'
        },
        {
          count: 97,
          loc: '中国云南省昆明市宜良县二十一段',
          lat: '25.1053716392368',
          lng: '102.77811408080228',
          aci: '25492',
          alac: '520'
        },
        {
          count: 97,
          loc: '中国云南省昆明市宜良县三段',
          lat: '25.237548084889838',
          lng: '103.22337189854795',
          aci: '2142',
          alac: '780'
        },
        {
          count: 89,
          loc: '中国云南省昆明市宜良县五段',
          lat: '25.40187657906381',
          lng: '99.63943654394689',
          aci: '30632',
          alac: '34080'
        },
        {
          count: 87,
          loc: '中国云南省昆明市宜良县十九段',
          lat: '25.105600588465236',
          lng: '102.77592126049662',
          aci: '25490',
          alac: '518'
        },
        {
          count: 86,
          loc: '中国云南省昆明市宜良县更新段',
          lat: '25.13612093139482',
          lng: '103.30543114192292',
          aci: '1281',
          alac: '34951'
        }
      ]
    }
  },
  methods: {
    onClick (evt, map) {
      console.log(evt, map)
    },
    // 地图对象生成完成事件
    onLoad () {

    },
    featuresChange (features) {
      console.log('features change', features)
    },
    onClickFeatures (evt, feature) {
      console.log(evt, feature)
      if (!feature) return
      this.selectFeature(feature)
    },
    selectFeature (feature) {
      if (this.selectedFeature) {
        this.toggleFeatureSelection(this.selectedFeature, false)
      }
      this.selectedFeature = feature
      this.toggleFeatureSelection(this.selectedFeature, true)
    },
    toggleFeatureSelection (feature, selected) {
      const { text, zIndex } = feature.get('properties')
      const config = {
        style: {
          zIndex: selected ? this.features.length : zIndex,
          icon: {
            src: selected ? selectPointIcon : pointIcon
          },
          text: {
            text,
            font: selected ? 'bold 18px Arial' : '14px Arial',
            fill: {
              color: selected ? '#FF512B' : '#3963FE'
            },
            offsetY: selected ? -5 : -4
          }
        }
      }
      this.$refs.pointLayer.updateFeatureById(feature.getId(), config)
    },
    handlePointData () {
      const points = this.list.map(x => ({ lon: Number(x.lng), lat: Number(x.lat), count: x.count }))
      this.features = points.map((point, i) => {
        return {
          id: `point-${i}`,
          coordinates: [point.lon, point.lat],
          convert:'4326-3857',
          style: {
            zIndex: i,
            icon: {
              src: pointIcon
            },
            text: {
              text: point.count + '',
              font: '14px Arial',
              fill: {
                color: '#3963FE'
              },
              offsetY: -4
            }
          },
          properties: {
            text: point.count + '',
            zIndex: i
          }
        }
      })
    }
  },
  created () {
    this.handlePointData()
  }
}
</script>

<style scoped>

</style>
